<template>
    <div class="plugin-container">
        <div class="plugin-box"
            :style="{ 'right': props.show ? '0' : '-436px', 'opacity': props.show ? '1' : '0', 'transition': 'all 1s' }">
            <div class="plugin-box-inner-wrapper">
                <!-- 异动态势 -->
                <div class="header unusualAction-header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span class="pointer">动态线路评价</span>
 
                </div>
                <div class="unusualAction-content">
                    <div class="unusualAction-content-item">
                        <img src="@/assets/dataIndex/right/circle-2.png" alt="">
                        <div style="margin-left: 8px;">
                            <div class="num1 num">{{ rightData1.stopUseCount || 0 }}</div>
                            <div>需停用</div>
                        </div>
                    </div>
                    <div class="unusualAction-content-item">
                        <img src="@/assets/dataIndex/right/circle-3.png" alt="">
                        <div style="margin-left: 8px;"  >
                            <div class="num2 num">{{ rightData1.adjustCount || 0 }}</div>
                            <div>需调整</div>
                        </div>
                    </div>
                    <div class="unusualAction-content-item">
                        <img src="@/assets/dataIndex/right/circle-1.png" alt="">
                        <div style="margin-left: 8px;"  >
                            <div class="num3 num">{{ rightData1.normalCount || 0 }}</div>
                            <div>正常</div>
                        </div>
                    </div>
                </div>
                <!-- 实时预警 -->
                <div class="header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span class="pointer">安全里程趋势</span>
                    <div class="flex1"></div>

                </div>
                <!--设备运行饼状图-->
                <div class="operation-content">
                    <div class="operation_charts2_box">
                        <div class="operation_charts2" id="operation_charts2"></div>
                    </div>

                </div>
                <!-- 最新报警 -->
                <div class="header latestAlarm-header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span>实时事件分析</span>

                </div>
                <!-- 实时事件分析 -->
                <div class="warning-content">
                    <div class="num_box pointer">
                        <span>提示报警设备</span>
                        <!-- <span class="num">{{props.rightData3.find(r => r.riskLevel === "URGENT")?.count ||
                            0}}</span> -->
                        <img src="@/assets/dataIndex/warn_left.png" alt="">
                        <span>重要报警设备</span>
                        <!-- <span class="num">{{props.rightData3.find(r => r.riskLevel === "URGENT")?.count ||
                            0}}</span> -->
                    </div>
                    <div class="logo_img_box">
                        <img class="logo_img" src="@/assets/dataIndex/warn_logo1.png" alt="">
                        <img class="logo_img" src="@/assets/dataIndex/warn_logo2.gif" alt="">
                        <img class="logo_img" src="@/assets/dataIndex/warn_logo3.gif" alt="">
                    </div>
                    <div class="num_box num_box_right pointer">
                        <span>次要报警设备</span>
                        <!-- <span class="num">{{props.rightData3?.find(r => r.riskLevel === "URGENT")?.count ||
                            0}}</span> -->
                        <img src="@/assets/dataIndex/warn_right.png" alt="">
                        <span>紧急报警设备</span>
                        <!-- <span class="num">{{props.rightData3.find(r => r.riskLevel === "URGENT")?.count ||
                            0}}</span> -->
                    </div>
                </div>
                <!--  -->
                <div class="latestAlarm-content-main">
                    <div class="ranking-list">
                    <div class="list_title">
                        <!-- <span class="ranking">
                            <span>排名</span>
                           
                        </span> -->
                        <span class="name">运营企业</span>
                        <span class="num">提示</span>
                        <span class="deviceNum">一般</span>
                        <span class="deviceNum">重要</span>
                        <span class="deviceNum">紧急</span>
                    </div>
                    <div class="list_item_box">
                        <div class="list_item" v-for="(item, index) in props.rightData4" :key="index">
                            <!-- <span class="ranking">
                                <span class="ranking_span" :class="`ranking_span_${index}`">{{ index + 1 }}</span>
                            </span> -->
                            <span class="name">{{ item.operatorName }}</span>
                            <span class="num">{{ item.riskLevel }}</span>
                           
                            <span class="deviceNum">{{ item.totalCount }}</span>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import * as echarts from 'echarts';
// import { useStore } from "vuex";
// import HandleAlarmModal from "@/components/HandleAlarmModal/HandleAlarmModal.vue";
import { useRouter } from "vue-router";


// const alarmModalRef = ref()
const router = useRouter()
// const route = useRoute()
const props = defineProps({
    show: {
        type: Boolean,
        default: true
    },
    rightData1: {
        type: Object,
        default: () => {}
    },
    rightData2: {
        type: Object,
        default: () => {}
    },
    rightData3: {
        type: Object,
        default: () => {}
    },
    rightData4: {
        type: Array,
        default: () => []
    },
})
// const HandleAlarmModalRef = ref()
const state = reactive({


})
const emit = defineEmits(['changeDate', 'updateAlarmLevel'])
onMounted(() => {

})

watch(() => props.rightData2, () => {
    setOperationCharts(props.rightData2)
}, {deep: true})
// 设备运行饼状图
const setOperationCharts = (chartData) => {
    console.log(chartData,'chartData - 设备运行饼状图')
    let chartDom = document.getElementById('operation_charts2');
    if (!chartDom) {
        setTimeout(() => {
            setOperationCharts(chartData)
        }, 200)
        return
    }
    let myChart = echarts.init(chartDom);
    if (!chartData) {
        if (myChart) {
            myChart.dispose();
        }
        return;
    }
    let valueKeyArr = ['workModeCt', 'noWorkModeCt', 'onLineCt', 'offLineCt']
    myChart = echarts.init(chartDom);
    let colorArr = ['#05A998,#63FBFC', '#FFA300,#DF5F42', '#05A998,#63FBFC', '#19407A,#5D80D0']
    let option = {
        grid: {
            left: '10%',
            right: '2%',
            bottom: '10%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: chartData.map(item => item.year),
            axisLine: {
                lineStyle: {
                    color: '#889EE3',
                }
            },
            axisTick: {
                show: false // 隐藏 X 轴刻度
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#889EE3',
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#889EE3',
                }
            }
        },
        series: [
            {
                data:  chartData.map(item => item.distance),
                type: 'bar',
                label: { // 在柱子上方显示值
                    show: true,
                    position: 'top', // 标签位置在柱子顶部
                    color: '#FFFFFF', // 标签字体颜色
                    fontSize: 12, // 标签字体大小
                    formatter: function (params) {
                        return Number(params.value); // 直接返回数据值
                    },
                },
                itemStyle: {
                    barBorderRadius: [5, 5, 0, 0], // 设置柱子的圆角
                    color: (params) => {
                        let gradientColors = colorArr.map(item => {
                            return {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: item.split(',')[0] },
                                    { offset: 1, color: item.split(',')[1] }
                                ],
                                global: false
                            }
                        })
                        return gradientColors[params.dataIndex]
                    }
                }
            }
        ]
    };
    option && myChart.setOption(option);
}





</script>


<style lang="less" scoped>
.outfire-text {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.outfire-remind {
    color: #E22A00;
    margin-top: 16px;
}

.plugin-container {
    .plugin-box {
        position: fixed;
        z-index: 8;
        width: 436px;
        background: #030635;
        opacity: 0.9;
        height: calc(100vh - 72px);
        right: 0;
        top: 85px;
        background: url("@/assets/dataIndex/factory_right_bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 22px 14px 22px 22px;

        .plugin-box-inner-wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
            color: #fff;
            display: flex;
            flex-direction: column;

            .header {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-family: PingFangSC-Semibold, PingFang SC, serif;
                font-weight: 600;
                color: #FFFFFF;
                height: 40px;
                background: url("@/assets/dataIndex/home_item_title.png") no-repeat bottom left;
                background-size: 355px 20px;

                img {
                    width: 13px;
                    height: 14px;
                    margin-right: 6px;
                }

                .tab_box {
                    width: 80px;
                    height: 32px;
                    background: rgba(1, 19, 84, 0.66);
                    box-shadow: inset 0px 0px 8px 0px rgba(84, 177, 255, 0.75);
                    border-radius: 6px;
                    font-size: 14px;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;

                    span {
                        font-weight: 300;
                    }
                }
            }

            .warning-content {
                width: 400px;
                height: 168px;
                margin: 20px auto;
                background: url("@/assets/dataIndex/warn_bg.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .logo_img_box {
                    width: 140px;
                    height: 140px;
                    margin: 0 16px;
                    position: relative;

                    img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                    }
                }

                .num_box {
                    display: flex;
                    flex-direction: column;

                    span {
                        font-weight: 600;
                        font-size: 14px;
                        color: #00CCCC;
                        margin-bottom: 8px;
                    }

                    .num {
                        font-weight: 700;
                        font-size: 24px;
                        line-height: 24px;
                        color: #FFFFFF;
                        text-align: right;
                        margin: 0;
                    }

                    img {
                        width: 56px;
                        height: 6px;
                        align-self: flex-end;
                        margin: 16px 0;
                    }
                }

                .num_box_right {
                    .num {
                        text-align: left;
                    }

                    img {
                        align-self: flex-start;
                    }
                }
            }

            .unusualAction-header {
                position: relative;

                .date {
                    position: absolute;
                    right: 0;
                    top: 10px;
                    width: 100px;
                    height: 24px;
                    border-radius: 4px;
                    overflow: hidden;
                    background: rgba(1, 19, 84, 0.66);
                    box-shadow: inset 0px 0px 8px 0px rgba(84, 177, 255, 0.75);

                    .date-item {
                        width: 50%;
                        height: 100%;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        cursor: pointer;
                    }

                    .date-item-selected {
                        background: #006EFF;
                    }
                }

                .date:hover {
                    background: rgba(1, 19, 84, 0.66);
                    box-shadow: inset 0px 0px 8px 0px #00CEFF;
                }
            }

            .unusualAction-content {
                width: 100%;
                height: 80px;
                margin: 0 0 14px 0;
                padding-right: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .unusualAction-content-item{
                    display: flex;
                    >div{
                        .num{
                            
                                                font-weight: 700;
        font-style: normal;
        font-size: 28px;       
                        }

.num1{
    color: #DF142B;
}
.num2{
    color: #FFFF00;
}
.num3{
    color: #00CCCC;
}
                    }
                }
                img{
                    width: 60px;
                    height: 60px;
                }

            }

            .ranking-list {
                flex: 1;
                display: flex;
                flex-direction: column;

                .list_title,
                .list_item {
                    background: url("@/assets/dataIndex/title_bg.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    height: 32px;
                    margin-top: 12px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 12px 0 20px;
                    font-weight: 600;
                    font-size: 12px;
                    color: #00CCCC;
                    line-height: 12px;

                    .ranking {
                        width: 50px;
                    }

                    .name {
                        width: 130px;
                    }

                    .num {
                        width: 60px;
                    }

                    .deviceNum {
                        width: 60px;
                    }
                }

                .list_title {
                    margin: 12px 0 0;

                    .ranking {
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }

                .list_item_box {
                    display: flex;
                    flex-direction: column;

                    .list_item {
                        height: 50px;
                        margin-top: 0;
                        padding-bottom: 4px;
                        background: url("@/assets/dataIndex/rank-bg.png") no-repeat bottom center;
                        background-size: calc(100% - 12px) 14px;
                        transition: all 0.2s;
                        cursor: pointer;

                        &:hover {
                            background-size: 100% 14px;
                        }

                        span {
                            height: 100%;
                            display: flex;
                            align-items: flex-end;
                            padding-bottom: 4px;
                            color: #FFFFFF;
                            font-weight: normal;
                        }

                        .ranking {
                            padding-bottom: 0;
                            padding-left: 2px;

                            img {
                                width: 20px;
                                height: 20px;
                            }

                            .ranking_span {
                                width: 26px;
                                height: 18px;
                                box-sizing: border-box;
                                overflow: hidden;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                box-shadow: inset 0 0 8px 0 #1A84CE;
                                border: 1px solid rgba(0, 138, 225, 1);
                                background: linear-gradient(to bottom, rgba(0, 69, 122, 0) 0%, #00457A 2%, #008AE1 100%);
                                font-weight: 900;
                                font-size: 10px;
                                line-height: 10px;
                                border-radius: 4px;
                                transform: translateX(-3px);
                                padding-bottom: 0;
                            }

                            .ranking_span_0 {
                                background: linear-gradient(rgba(182, 112, 0, 0) 0%, #FF9C00 100%);
                                box-shadow: inset 0px 0px 8px 0px rgba(254, 189, 45, 0.8);
                                border: none;
                            }

                            .ranking_span_1 {
                                background: linear-gradient(rgba(30, 153, 42, 0) 0%, #3AB34E 100%);
                                box-shadow: inset 0px 0px 8px 0px #23CC40;
                                border: none;
                            }

                            .ranking_span_2 {
                                background: linear-gradient(#4B0405 0%, #C52A2B 100%);
                                box-shadow: inset 0px 0px 8px 0px rgba(255, 109, 109, 0.8);
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
    .operation_charts2_box {
                    margin: 10px 0;
                    position: relative;
                    height: 200px;

                    .operation_charts2 {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        width: 100%;
                        height: 200px;
                    }
                }
}
</style>
